<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Children's Clothing-RAREWE-Shopping bag</title>
    <link rel="stylesheet" th:href="@{mall/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{mall/css/common.css}">
    <link rel="stylesheet" th:href="@{mall/styles/header.css}">
    <link rel="stylesheet" th:href="@{mall/styles/cart.css}">
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
    <link rel="stylesheet" th:href="@{/static/mall/css/layui.css}">
    <style>
        html, body {
            height: 100%;
        }
        .content-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="content-wrapper">
    <header th:replace="mall/header::header-fragment"></header>
    <div id="cart">
        <div class="banner_x center">
            <a th:href="@{/index}" target="_blank">
                <div class="logo fl">
                    <!--<img src="mall/image/new-bee-logo-3.png"/>-->
                </div>
            </a>

            <div class="wdgwc fl ml20">Shopping Bag</div>
            <div class="wxts fl ml20">Warm tips: whether the product is successfully purchased depends on the final order</div>
            <div class="clear"></div>
        </div>
        <div class="cart_line"></div>
        <div class="cart_bg">
            <th:block th:if="${#lists.isEmpty(myShoppingCartItems)}">
                <div class="list center">
                    <!-- todo 无购物项时 换背景图 -->
                    Your Shopping Bag is Empty! Let's Change That!
                </div>
            </th:block>
            <th:block th:unless="${#lists.isEmpty(myShoppingCartItems)}">
                <div class="list center">
                    <div class="top2 center">
                        <div class="sub_top fl">
                        </div>
                        <div class="sub_top fl">name</div>
                        <div class="sub_top fl">Specifications</div>
                        <div class="sub_top fl">Unit Price</div>
                        <div class="sub_top fl">Quantity</div>
                        <div class="sub_top fl">subtotal</div>
                        <div class="clear"></div>
                    </div>
                    <th:block th:each="item : ${myShoppingCartItems}">
                        <div class="content2 center">
                            <div class="sub_content fl ">
                            </div>
                            <div class="sub_content cover fl"><img th:src="@{${item.goodsCoverImg}}"></div>
                            <div class="sub_content fl ft20" th:text="${item.goodsName}"></div>
                            <div class="sub_content fl" th:text="${item.goodsSkus}"></div>
                            <div class="sub_content fl" th:text="'$'+${item.sellingPrice}"></div>
                            <div class="sub_content fl">
                                <input class="goods_count" th:id="${'goodsCount'+item.cartItemId}" type="number"
                                       th:onblur="'updateItem('+${item.cartItemId}+')'"
                                       th:value="${item.goodsCount}" step="1">
                            </div>
                            <div class="sub_content fl" th:text="'$'+${item.goodsCount*item.sellingPrice}"></div>
                            <div class="sub_content fl"><a href="##"
                                                           th:onclick="'deleteItem('+${item.cartItemId}+')'">×</a>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </th:block>
                </div>
            </th:block>
            <div class="pre_order mt20 center">
                <div class="tips fl ml20">
                    <ul>
                        <li><a th:href="@{/index}">Continue shopping</a></li>
                        <li>|</li>
                        <li>Total quantity:<span th:text="${itemsTotal}"></span></li>
                        <div class="clear"></div>
                    </ul>
                </div>
                <div class="order_div fr">
                    <div class="order_total fl">Total Price（Excluding freight）：<span th:text="'$ '+${priceTotal}"></span></div>
                    <div class="order_button fr">
                        <th:block th:if="${itemsTotal == 0}">
                            <input class="order_button_c" type="button" name="tip"
                                   onclick="tip()"
                                   value="checkout"/>
                        </th:block>
                        <th:block th:unless="${itemsTotal == 0}">
                            <input data-method="notice" class="order_button_d" type="button" name="settle"
                                   onclick="settle()"
                                   value="checkout"/>
                        </th:block>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div th:replace="mall/footer::footer-fragment"></div>

</div>
</body>
<!-- jQuery -->
<script th:src="@{/static/mall/js/jquery-1.8.0.js}"></script>
<!--<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>-->
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/static/mall/js/layer.js}"></script>
<script type="text/javascript">

    /**
     * 购物车中数量为0时提示
     */
    function tip() {
        swal("购物车中无数据，无法结算", {
            icon: "error",
        });
    }

    /**
     * 跳转至结算页面
     */
   function settle(){
       console.log(layer)
        layer.open({
            type: 1
            ,title: false //不显示标题栏
            ,closeBtn: false
            ,area: '300px;'
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['confirm', 'return']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>Please note that if your order contains pre-sale products and in stock ready to ship items,<br><br> then the shipping date of the entire order is subject to the shipping date of the pre-sale products. <br><br>If you don’t want to wait, it is recommended that you place separate orders for pre-sales items and RTS items.<br></div>'
            ,success: function(layero){
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').attr({
                    href: '/shop-cart/settle'
                });
            }
        });
        //window.location.href = '/shop-cart/settle'
    }

    /**
     *更新购物项
     *
     * todo 判断是否与原值相同
     */
    function updateItem(id) {
        var domId = 'goodsCount' + id;
        var goodsCount = $("#" + domId).val();
        /*if (goodsCount > 5) {
            swal("单个商品最多可购买5个", {
                icon: "error",
            });
            return;
        }*/
        if (goodsCount < 1) {
            swal("数量异常", {
                icon: "error",
            });
            return;
        }
        var data = {
            "cartItemId": id,
            "goodsCount": goodsCount
        };
        $.ajax({
            type: 'PUT',
            url: '/shop-cart',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.resultCode == 200) {
                    window.location.reload();
                } else {
                    swal("操作失败", {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }

    /**
     * * 删除购物项
     * @param id
     */
    function deleteItem(id) {
        swal({
            title: "确认弹框",
            text: "确认要删除数据吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
                if (flag) {
                    $.ajax({
                        type: 'DELETE',
                        url: '/shop-cart/' + id,
                        success: function (result) {
                            if (result.resultCode == 200) {
                                window.location.reload();
                            } else {
                                swal("操作失败", {
                                    icon: "error",
                                });
                            }
                        },
                        error: function () {
                            swal("操作失败", {
                                icon: "error",
                            });
                        }
                    });
                }
            }
        )
        ;
    }
</script>
</html>
